<template>
  <div class="cart-container">
    <div class="goods-list">

      <div class="mui-card" v-for="item in goodslist" :key="item.id">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <mt-switch></mt-switch>
            <img :src="item.thumb_path">
            <div class="info">
              <h1>{{item.title}}</h1>
              <p>
                <span class="price">&yen;{{item.sell_price}}</span>
                <number-box></number-box>
                <a href="#">删除</a>
              </p>
            </div>
          </div>
        </div>
      </div>

    <!-- <div class="mui-card">
    </div> -->
      
    </div>

    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等</div>
      </div>
    </div>
  </div>
</template>

<script>
import ShopNumberBox from "../subcomponent/ShopNumberBox.vue";
export default {
  created() {
    this.getShoppingCart();
  },
  data() {
    return { goodslist: [] };
  },
  methods: {
    getShoppingCart() {

      let arr = []
      this.$store.state.car.forEach(item=>arr.push(item.id))
    //   console.log(arr.join(","));
      
      if(arr.length<=0){
          return ;
      }

      this.$http.get("shopping/goodsList/"+arr.join(",")).then(result => {
        if (result.body.status == 0) {
          this.goodslist = result.body.message;
        }
      });
    }
  },
  components: {
    numberBox: ShopNumberBox
  }
};
</script>

<style lang="scss" scoped>
.cart-container {
  background-color: #eee;
  overflow: hidden;
  .goods-list {
    .mui-card-content-inner {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    img {
      width: 60px;
      height: 60px;
    }
    h1 {
      font-size: 13px;
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .price {
      color: #f00;
      font-weight: 700;
    }
  }
}
</style>
